<template>
  <a-modal v-bind="$attrs" title="编辑统计表区" :width="400" :mask="false" centered :maskClosable="false" :destroyOnClose="true" @cancel="cancelHandler">
      <a-form-model :model="configForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <!-- <a-form-model-item label="宽">
          <a-input v-model="configForm.width" />
        </a-form-model-item> -->
        <a-form-model-item label="内容">
          <a-select v-model="configForm.content" placeholder="请选择">
            <a-select-option
              v-for="item in chartsCategory"
              :key="item.id"
              :value="item.id">
                {{item.title}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item label="最大条数">
          <a-input v-model="configForm.length" />
        </a-form-model-item> -->
      </a-form-model>
      <div slot="footer">
        <a-button @click="cancelHandler">取消</a-button>
        <a-button type="primary" @click="okHandler">确认</a-button>
      </div>
    </a-modal>
</template>
<script>
import { setPersonalConfig } from '@/api/devportalApi.js'
export default {
  name: 'ChartConfigModal',
  props: {
    chartsCategory: {
      type: Array,
      default: () => []
    },
    currentChartCategoryId: {
      type: [String, Number],
      default: undefined
    },
    workSpaceItem: {
      type: Object,
      defualt: () => ({})
    }
  },
  data () {
    return {
      configForm: {
        width: '',
        content: undefined,
        length: ''
      },
      options: []
    }
  },
  methods: {
    cancelHandler () {
      this.$emit('cancel')
      this.$set(this.configForm, 'content', undefined)
    },
    okHandler () {
      if (!this.configForm.content) {
        this.$message.warning('请选择图表内容')
        return
      }
      let selectedContent = this.chartsCategory.find(item => item.id == this.configForm.content)
      let contentSortList = [
        {
          contentId: this.configForm.content,
          rank: selectedContent.rank
        }
      ]
      let { width, moduleId, moduleName, workspaceId, workspaceName } = this.workSpaceItem
      let submitData = {
        contentSortList,
        // num: this.configForm.num,
        width,
        moduleId,
        moduleName,
        workspaceId,
        workspaceName
      }
      // console.log(submitData)
      let method = this.workSpaceItem.personalConfig && this.workSpaceItem.personalConfig.contentSortList.length !== 0 ? 'put' : 'post'
      if (method === 'put') {
        submitData.objectVersionNumber = this.workSpaceItem.personalConfig.objectVersionNumber
        submitData._token = this.workSpaceItem.personalConfig._token
        submitData.id = this.workSpaceItem.personalConfig.id
      }
      setPersonalConfig(method, submitData).then(res => {
        if (res.status === 200) {
          this.$emit('ok')
          this.$set(this.configForm, 'content', undefined)
        }
      })
    },
  },
  mounted () {
  },
  watch: {
    '$attrs.visible' (newStatus) {
      if (newStatus) {
        this.$set(this.configForm, 'content', Number(this.currentChartCategoryId))
      }
    }
  }
}
</script>
<style lang="less" scoped>
.portal-draggable-tree {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  /deep/li .ant-tree-node-content-wrapper {
    .custom-title-box {
      .swap-icon {
        color: #5e83ff;
        display: none;
        transform: rotate(90deg);
        float: right;
        margin-top: 2px;
      }
    }
    &:hover {
      .swap-icon {
        display: block;
      }
    }
  }
  /deep/li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: transparent;
  }
}
</style>